<template>
  <section class="todoapp">
   <todo-header @add = introduce></todo-header>
   <todo-main @changeAll = changeAll  :list ='list2' @des = destroy @change="handleChange"></todo-main>
   <todo-footer @changeState = changeState :flag = flag :allnoCom = allnoCom @delallcom = delallcom></todo-footer>
  </section>
</template>

<script>
import TodoHeader from '@/components/TodoHeader.vue';
import TodoMain from '@/components/TodoMain.vue';
import TodoFooter from '@/components/TodoFooter.vue';
export default {
  components: { TodoHeader, TodoMain, TodoFooter },
  data () {
    return {
      flag:1,
      list: JSON.parse(localStorage.getItem('list')) || []
    }
  },
  methods:{
    destroy(id) {
     this.list = this.list.filter(item => item.id != id)
    },
    introduce(dataheader){
      this.list.push({
        id:Date.now(),
        name:dataheader,
        isDone:false
      })
    },
    handleChange(id){
      let res = this.list.find(item => item.id === id)
      res.isDone = !res.isDone
    },
    delallcom(){
     this.list = this.list.filter(item => !item.isDone)
    },
    changeState(number){
      this.flag = number
    },
    changeAll(val){
      this.list.forEach(item =>item.isDone = val)
    }
   
  },
  computed:{
    allnoCom(){
      return this.list.filter(item => !item.isDone).length
    },
    list2(){
    if (this.flag===1) {
     return this.list
    }else if(this.flag===2){
    return this.list.filter(item => !item.isDone)
    }else{
      return this.list.filter(item =>item.isDone)
    }
    },
    
  },
  watch:{
    list:{
      handler(newval){
        localStorage.setItem('list',JSON.stringify(newval))
      },
      deep:true
    }
  }
  }
</script>

<style>
</style>
